<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例_图书管理_获取数据</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root {
            font-size: 15px;
        }

        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 栅格系统 -->
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h1>图书管理</h1>
            <button 
                class="btn btn-success btn-sm" 
                data-bs-toggle="modal" 
                data-bs-target="#addModal" 
                id="myAddBtn">添加</button>
        </div>
        <table class="table table-bordered table-striped table-dark table-hover text-center">
            <thead>
                <!-- 表头行 -->
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">书名</th>
                    <th scope="col">作者</th>
                    <th scope="col">出版社</th>
                    <th scope="col">操作</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <!-- 表格中的每一行 -->
                <tr>
                    <th scope="row">xxx</th>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>xxx</td>
                    <td>
                        <button type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                        <button type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 添加 add Modal -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addForm" class="p-3">
                        <!-- 书名 -->
                        <div class="mb-3">
                            <label class="form-label">书名</label>
                            <input type="text" name="bookname" class="form-control" placeholder="请输入图书名称"
                                name="bookname" />
                        </div>
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label class="form-label">作者</label>
                            <input type="text" name="author" class="form-control" placeholder="请输入作者名字" name="author" />
                        </div>
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label class="form-label">出版社</label>
                            <input type="text" name="publisher" class="form-control" placeholder="请输入出版社名称"
                                name="publisher" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="addBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 编辑 edit Modal -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm" class="p-3">
                        <!-- type:hidden 隐藏 -->
                        <input name="id" type="hidden"/>
                        <!-- 书名 -->
                        <div class="mb-3">
                            <label class="form-label">书名</label>
                            <input id="bookname" type="text" name="bookname" class="form-control" placeholder="请输入图书名称" />
                        </div>
                        <!-- 作者 -->
                        <div class="mb-3">
                            <label class="form-label">作者</label>
                            <input type="text" id="author" class="form-control" placeholder="请输入作者名字" name="author" />
                        </div>
                        <!-- 出版社 -->
                        <div class="mb-3">
                            <label class="form-label">出版社</label>
                            <input type="text" id="publisher" class="form-control" placeholder="请输入出版社名称"
                                name="publisher" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="editBtn">确认</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    <script src="./lib/form-serialize.js"></script>
    
    <script>
        // 设置axios的基地址： 随后所有的请求的URL会自动添加基地址
        // axios.defaults.baseURL = 'http://hmajax.itheima.net'
        axios.defaults.baseURL = 'http://ajax-api.itheima.net'
        
        const addModal = new bootstrap.Modal(document.querySelector('#addModal'))
        const editModal = new bootstrap.Modal(document.querySelector('#editModal'))
        const addForm = document.querySelector('#addForm')
        const editForm = document.querySelector('#editForm')

        // 查询 alt + 上下方向键

        // 1. 封装一个渲染函数。它会多次被调用
        function render() {
            // axios({
            //     url: '/api/books',
            //     // url: 'http://ajax-api.itheima.net/api/books',
            //     // method: 'GET' // 默认的method就是GET
            // })
            axios.get('/api/books').then(res => {
                console.log(res.data.data)
                // 显示到页面
                // 组装一个长的str，设置为tbody的innerHTML
                
                const arr = res.data.data
                let str = arr.map(item => {
                    return `<tr>
                        <th scope="row">${item.id}</th>
                        <td>${item.bookname}</td>
                        <td>${item.author}</td>
                        <td>${item.publisher}</td>
                        <td>
                            <button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-delete">删除</button>
                            <button data-id="${item.id}" type="button" class="btn btn-link btn-sm btn-update">编辑</button>
                        </td>
                    </tr>`
                }).join("")
        
                document.querySelector('#tbody').innerHTML = str
            })
        }

        // 2. 查询
        render()

        function deleteBook(id) {
            axios({
                    url: '/api/books/' + id,
                    method: 'DELETE'
                }).then(res => {
                    console.log(res)
                    // 重发一次，更新页面
                    render()
                })
        }

        function editBook(id) {
            // alert(id)
            // 1. 显示弹框
            editModal.show()
            // 2. 数据回填。 把数据显示在表单中
            // 根据id去获取详细数据
            axios({
                url: '/api/books/' + id,
                method: 'GET'
            }).then(res => {
                console.log(res.data.data.bookname)
                // 书名： res.data.data.bookname
                document.querySelector('#bookname').value = res.data.data.bookname

                // editForm.querySelector("[name='bookname']").value = res.data.data.bookname
                editForm.querySelector("[name='id']").value = id
                document.querySelector('#author').value = res.data.data.author
                document.querySelector('#publisher').value = res.data.data.publisher
                // document.querySelector('#bookname').value = res.data.data.bookname
            })

        }
        
        // 3. 删除。 事件委托 + 自定义属性 ===> 重新查询一次
        document.querySelector('#tbody').addEventListener('click', (e) => {
            // 获取id
            const id = e.target.dataset.id
            // if(类名 包含 btn-delete) { 删除 }
            if(e.target.className.includes('btn-delete')) {
                deleteBook(id)
            } else if(e.target.className.includes('btn-update')) {
                // alert('编辑')
                editBook(id)
            }
        })

        // 4. 添加
        // 给按钮添加点击事件

        document.querySelector('#addBtn').addEventListener('click', (e) => {
            // 1. 收集用户的输入(对象格式)
            const p = serialize(document.querySelector('#addForm'), { hash: true})
            console.log(p)
            // 2. 发请求
            // axios({
            //     url: '/api/books',
            //     method: 'POST',
            //     data: p
            // })
            axios.post('/api/books', p).then(res => {
                // console.log(res)
                // 1.重新渲染页面
                render()
                // 2.关闭弹框(bootstrap给的， 这里要调用bs的方法)
                addModal.hide()
                // 3.清空表单的内容
                addForm.reset()
            })
        })

        // 5. 保存编辑结果
        // 处理id
        //   数据回填时就填入值，要隐藏（防止用户用户）
        document.querySelector('#editBtn').addEventListener('click', () => {
            // 整体获取表单元素的值（包括隐藏的id值）
            const p = serialize(document.querySelector('#editForm'), {hash: true})
            console.log(p)
            // axios({
            //     url: '/api/books/' + p.id,
            //     method: 'PUT',
            //     data: { 
            //         bookname: p.bookname,
            //         author: p.author,
            //         publisher: p.publisher
            //     }
            // })
            const d = { 
                bookname: p.bookname,
                author: p.author,
                publisher: p.publisher
            }
            axios.put('/api/books/' + p.id, d).then(res => {
                console.log(res)
                // 1. 重新查询
                render()
                // 2. 关闭弹框
                editModal.hide()
            })
        })
    </script>
</body>

</html>